<template>
	<div class="common-layout">
		<el-dialog title="流程处理" :close-on-click-modal="false" v-model="state.visible" width="95%"   @close="refreshEmit">
			<el-container style="height: 100%;">
				<el-container>
					<el-main style="padding: 0px">
						<el-card>
							<el-form :model="state.dataForm" :rules="state.dataRule" ref="dataFormRef">
								<v-form-render :form-json="state.formJson" :form-data="state.formData" :option-data="state.optionData" ref="vFormRef">
								</v-form-render>
							</el-form>
						</el-card>
						<el-card>
							<approveCommonFoot v-model:modelValue="state.taskParam" @refreshEmit="refreshEmit"
								@dataFormSubmit="dataFormSubmit" :isUpload="true" :disagreeShow="true"
								:taskId="state.dataForm.taskParam.taskId" :processId="state.dataForm.taskParam.processId" :businessKey="state.dataForm.taskParam.businessKey">
							</approveCommonFoot>
						</el-card>
					</el-main>
				</el-container>
				<el-aside width="300px">
						<approveHisDetailFoot :processId="state.dataForm.taskParam.processId"></approveHisDetailFoot>
				</el-aside>
			</el-container>
		</el-dialog>
	</div>
</template>
<script setup lang="ts" name="approveProcessCommon">
import { ElLoading, ElMessage, FormInstance } from 'element-plus'
import { defineAsyncComponent, reactive, ref } from 'vue'
import { developApi } from '/@/api/sys/develop-api'
import { post } from '/@/api/http'
import { TaskParam } from '/@/api/sys/workflow-api';

const approveHisDetailFoot = defineAsyncComponent(() => import('./approveHisDetailFoot.vue'))
const approveCommonFoot = defineAsyncComponent(() => import('./approveCommonFoot.vue'))
// 定义子组件向父组件传值/事件
const emit = defineEmits(['refreshDataList'])
const vFormRef = ref()
const dataFormRef = ref<FormInstance>()
const state = reactive({
	visible: false,	
	formData: {},
	optionData: {},
	customizeApi: '0',
	detailApiUrl: '',
	updateApiUrl: '',
	formJson:{"widgetList":[],"formConfig":{"modelName":"formData","refName":"vForm","rulesName":"rules","labelWidth":80,"labelPosition":"left","size":"","labelAlign":"label-left-align","cssCode":"","customClass":"","functions":"","layoutType":"PC","jsonVersion": 3,"onFormCreated":"","onFormMounted":"","onFormDataChange":"","onFormValidate":""}},
	dataForm: {
		formData: {},
		taskParam: {
			processId: '',
			taskId: '',
			businessKey: '',
			description: '',
			approveAdvice: '',
			approveUserId: '',
		},
		id: '',
		version: 0,
		designerId: '',
		designerCode: '',
		designerName: ''
	},
	taskParam: {} as TaskParam,
	dataRule: {}
})
const openDialog = (insId: string, taskId: string, businessKey: string, designerId: string, designerCode: string) => {
	state.visible = true
	state.dataForm.taskParam.processId = insId
	state.dataForm.taskParam.taskId = taskId
	state.dataForm.taskParam.businessKey = businessKey
	developApi.getSysBusinessDesignerByCodeHasJson(designerCode, '2').then((data) => {
		if (data && data.code === 0) {
			vFormRef.value.setFormJson(data.data.modFormJson)
			state.dataForm.designerId = data.data.id
			state.dataForm.designerCode = data.data.designerCode
			state.customizeApi = data.data.customizeApi
			state.detailApiUrl = data.data.detailApiUrl
			state.updateApiUrl = data.data.updateApiUrl
			//加载业务数据
			if(state.customizeApi === '1'){
				post({
					url: state.detailApiUrl,
					data: state.dataForm
				}).then((data) => {
					if(data && data && data.code === 0){
						state.formData = data.data
						vFormRef.value.setFormData(JSON.parse(data.data.formData))
					}
				})
			}else{
				developApi.getSysBusinessCommonInfoById(businessKey).then((data) => {
					if(data && data && data.code === 0){
						state.formData = JSON.parse(data.data.formData)
						vFormRef.value.setFormData(JSON.parse(data.data.formData))
					}
				})
			}
		}
	})
}
// 关闭弹窗
const closeDialog = () => {
	state.visible = false
}
const dataFormSubmit = (taskParam: any) => {
	vFormRef.value.getFormData().then((formData: any) => {
		state.dataForm.formData = formData
		state.taskParam = taskParam
		const loading = ElLoading.service({
			lock: true,
			text: '处理中',
			background: 'rgba(0, 0, 0, 0.7)',
		})
		if(state.customizeApi === '1'){
			//自定义后端接口的情况
			post({
				url: state.updateApiUrl,
				data: state.dataForm
			}).then((data) => {
				if(data && data && data.code === 0){
					ElMessage.success('提交成功')
					closeDialog()
				}else{
					ElMessage.error(data.message)
				}
			}).catch(() => {
				ElMessage.error('提交数据失败')
			}).finally(() => {
				loading.close()
			})
		}else{
			//默认的后端接口，以json格式存储表单数据
			developApi.submitBusinessCommonAdd(state.dataForm).then((data) => {
				if(data && data.code === 0){
					ElMessage.success('提交成功')
					closeDialog()
				}else{
					ElMessage.error(data.message)
				}
			}).catch(() => {
				ElMessage.error('提交数据失败')
			}).finally(() => {
				loading.close()
			})
		}
	}).catch((error: MessageParamsWithType | undefined) => {
		ElMessage.error(error)
	})
}
const refreshEmit = () => {
	closeDialog()
	emit('refreshDataList')
}
// 暴露变量
defineExpose({
	openDialog
})
</script>
<style scoped lang="scss">
:deep(.el-dialog){
	height: 95%;
	.el-dialog__body {
		padding: 0 !important;
		max-height: calc(90vh - 50px) !important;
    overflow-y: auto;
    overflow-x: hidden;
	}
}
</style>